<template>
  <a-modal :open="open" width="680px" title="插入队列" centered :ok-button-props="{ disabled: !isCompleted }" ok-text="保存" @ok="onOk" @cancel="onCancel">
    <BaseTable :loading="loading" :columns="columns" :data-source="tableData" bordered :pagination="pagination">
      <template #bodyCell="{ column }">
        <template v-if="column.dataIndex === 'sort'">
          <a-dropdown placement="bottomRight" :get-popup-container="(trigger) => trigger.parentNode">
            <template #overlay>
              <a-menu class="text-center">
                <a-menu-item v-for="(action, i) in actionArray" :key="i">
                  <BaseButton size="small" type="link" @click="onClickVisit(item, action.state)">{{ action.title }}</BaseButton>
                </a-menu-item>
              </a-menu>
            </template>
            <div class="px-1 py-1 text-center hover:bg-slate-200 rounded">
              <MoreOutlined class="text-base" />
            </div>
          </a-dropdown>
        </template>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { MoreOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'

const router = useRouter()

const emit = defineEmits(['update:open', 'update:value', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const formState = ref({
  reason: '',
  effectiveTime: '',
  memo: ''
})
const columns = ref([
  {
    title: '排序',
    dataIndex: 'sort',
    width: 50
  },
  {
    title: '排队号',
    dataIndex: 'r'
  },
  {
    title: '患者',
    dataIndex: 'e'
  },
  {
    title: '挂号类别',
    dataIndex: 'action'
  },
  {
    title: '诊室',
    dataIndex: 'action'
  }
])
const actionArray = ref([
  {
    title: '置顶'
  },
  {
    title: '向前一位'
  },
  {
    title: '向后一位'
  },
  {
    title: '置底'
  }
])
const tableData = ref([{}, {}, {}, {}, {}, {}])

const rulesState = ref({
  reason: [{ required: true, message: '请输入调价根据' }],
  effectiveTime: [{ required: true, message: '请选择生效日期' }]
})
const { isCompleted, resetFields, validate } = useForm(formState, rulesState)
watch(
  () => props.open,
  (val) => {
    if (val) {
      if (props.rowData?.id !== '') {
        formState.value = {
          ...props.rowData
        }
      }
    }
  }
)

const onOk = async () => {
  await validate()
  const formData = {
    id: formState.value.id || '',
    ...formState.value
  }
  const res = await post('materials/comprehenive/doSavePriceAdjustmentHead', formData)
  if (res.code === 0) {
    message.success(res.msg)
    if (!formState.value?.id) {
      router.push({
        path: '/material/price/adjust-detail',
        query: {
          id: res.data.id
        }
      })
    }

    emit('success')

    onCancel()
  } else {
    message.error(res.msg)
  }
}

const onCancel = () => {
  emit('update:open', false)
  resetFields()
}
</script>
<style lang="less" scoped></style>
